<template >
  <q-page v-if='pageData !== null'>
    <!--    头部横幅-->
    <div class='top-bar'/>
    <div align='center'>
      <div id="pdfDom" style='width: 70em'>
        <!--    LOGO-->
        <div class="logo-container">
          <Logo/>
        </div>

        <!--    头部横幅打印-->
        <div class='top-bar-print'/>
        <!--    头部标题-->
        <div class='text-center main-title'>
          车辆检测评估报告
        </div>
        <!--    车辆信息-->
        <CarInfo :car-info='pageData.carInfoData' />
        <!--    车辆图片-->
        <Imgs :img-data = 'pageData.imgData' />
        <!--    车况信息-->
        <CarMessage :car-message='pageData.carMessageData' />
      </div>
    </div>

    <div align='center' class='pdf' >
      <q-btn @click='exportPdf(pageData.carInfoData.carType)'>导出PDF</q-btn>
    </div>
  </q-page>
</template>


<script lang='ts'>
import { defineComponent,ref,onMounted } from 'vue';
import Logo from './components/Logo.vue'
import CarInfo from './components/CarInfo.vue'
import CarMessage from './components/CarMessage.vue'
import Imgs from './components/Imgs.vue'

import { PageData } from './model/ReportData'
import { getReportData } from 'pages/kungfu/function/ServerData';
import { useRoute } from 'vue-router';

import { exportPdf } from './function/htmlToPdf'
export default defineComponent( {
  name: 'Report',
  components: { Logo,CarInfo,CarMessage,Imgs },
  setup () {
    let rote = useRoute();
    const uuid = <string> rote.query.uuid;
    let pageData = ref<PageData>(null)
    onMounted(() => {
      getReportData(uuid, pageData)
    })
    return {
      pageData,
      exportPdf
    }
  }
});
</script>

<style scoped lang='sass'>

//顶部条幅与标题样式
@mixin top-size($top-bar-height,$main-title-top-padding,$title-font-size)
  .top-bar
    background-color: #f0b708
    height: $top-bar-height
    width: 100%
    position: absolute
  .top-bar-print
    background-color: #f0b708
    height: $top-bar-height
  .main-title
    padding-top: $main-title-top-padding
    font-size: $title-font-size
    margin-bottom: $main-title-top-padding


//logo位置
.logo-container
  width: 110em
  position: absolute
  padding-top: 1.2em
.pdf
  height: 8em

//桌面页面样式
@media screen and (min-device-width: 960px)
  @include top-size($top-bar-height: 60pt,$main-title-top-padding: 50pt,$title-font-size:4em)

//移动页面样式
@media screen and (max-device-width: 960px)
  @include top-size($top-bar-height: 3em,$main-title-top-padding: 1.6em,$title-font-size: 1.6em)

</style>
